<template>
  <div class="ticket-detail">
    <el-card v-loading="loading">
      <template #header>
        <div class="header">
          <h3>🔍 工单详情 #{{ ticketId }}</h3>
          <el-button @click="router.back()">⬅️ 返回</el-button>
        </div>
      </template>
      
      <div v-if="ticket">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="项目名称">{{ ticket.projectName }}</el-descriptions-item>
          <el-descriptions-item label="项目类型">
            <el-tag size="small">{{ getProjectTypeText(ticket.projectType) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="优先级">
            <el-tag :type="getPriorityType(ticket.priority)" size="small">
              {{ getPriorityText(ticket.priority) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusType(ticket.status)" size="small">
              {{ getStatusText(ticket.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="预算范围">{{ getBudgetText(ticket.budget) }}</el-descriptions-item>
          <el-descriptions-item label="负责人">{{ ticket.assignee || "未分配" }}</el-descriptions-item>
          <el-descriptions-item label="期望完成时间">{{ ticket.deadline }}</el-descriptions-item>
          <el-descriptions-item label="预估工期">{{ ticket.duration }}天</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ ticket.createTime }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ ticket.updateTime }}</el-descriptions-item>
        </el-descriptions>
        
        <div class="section">
          <h4>📝 需求描述</h4>
          <p class="description">{{ ticket.description }}</p>
        </div>

        <div class="section">
          <h4>💻 技术栈</h4>
          <div class="tags">
            <el-tag v-for="tech in ticket.techStack" :key="tech" class="tag">{{ tech }}</el-tag>
          </div>
        </div>

        <div class="section">
          <h4>🔧 功能模块</h4>
          <div class="tags">
            <el-tag v-for="module in ticket.modules" :key="module" type="success" class="tag">
              {{ getModuleText(module) }}
            </el-tag>
          </div>
        </div>

        <div class="section" v-if="ticket.specialRequirements">
          <h4>⚠️ 特殊要求</h4>
          <p class="description">{{ ticket.specialRequirements }}</p>
        </div>
        
        <div class="actions">
          <el-button type="primary" v-if="ticket.status === 'pending'" @click="assignTicket">
            👥 分配工单
          </el-button>
          <el-button type="success" v-if="ticket.status === 'progress'" @click="completeTicket">
            ✅ 完成工单
          </el-button>
          <el-button @click="editTicket">✏️ 编辑</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
import { ElMessage } from "element-plus"

const route = useRoute()
const router = useRouter()
const loading = ref(false)
// const ticketId = route.params.id

// 模拟工单数据
const ticket = ref({
  id: 1,
  projectName: "电商管理系统",
  projectType: "web",
  priority: "high",
  status: "pending",
  budget: "medium",
  assignee: "",
  deadline: "2024-02-15",
  duration: 45,
  createTime: "2024-01-15 10:30:00",
  updateTime: "2024-01-15 10:30:00",
  description: "需要开发一个完整的电商管理系统，包括商品管理、订单管理、用户管理、支付系统等核心功能。要求界面美观，操作简便，性能稳定。",
  techStack: ["Vue.js", "Node.js", "MySQL", "Element Plus"],
  modules: ["user", "auth", "payment", "report"],
  specialRequirements: "需要支持移动端响应式设计，要求有完整的API文档。"
})

const getProjectTypeText = (type) => {
  const map = { web: "Web应用", mobile: "移动应用", desktop: "桌面应用", api: "API接口", data: "数据分析" }
  return map[type] || type
}

const getPriorityText = (priority) => {
  const map = { low: "🟢 低", medium: "🟡 中", high: "🔴 高", urgent: "🚨 紧急" }
  return map[priority] || priority
}

const getPriorityType = (priority) => {
  const map = { low: "", medium: "warning", high: "danger", urgent: "danger" }
  return map[priority] || ""
}

const getStatusText = (status) => {
  const map = { pending: "待分配", progress: "进行中", completed: "已完成" }
  return map[status] || status
}

const getStatusType = (status) => {
  const map = { pending: "info", progress: "warning", completed: "success" }
  return map[status] || ""
}

const getBudgetText = (budget) => {
  const map = { low: "1万以下", medium: "1-5万", high: "5-10万", unlimited: "10万以上" }
  return map[budget] || budget
}

const getModuleText = (module) => {
  const map = { user: "用户管理", auth: "权限认证", payment: "支付系统", report: "报表统计", message: "消息通知", file: "文件管理" }
  return map[module] || module
}

const assignTicket = () => {
  router.push(`/ticket/assign?id=${ticketId}`)
}

const completeTicket = () => {
  ElMessage.success("工单已完成")
  ticket.value.status = "completed"
}

const editTicket = () => {
  ElMessage.info("编辑功能待开发")
}

onMounted(() => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 500)
})
</script>

<style>
/* .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section {
  margin: 20px 0;
} */
/* .section h4 { margin-bottom: 10px; color: #303133; }
.description { background: #f5f7fa; padding: 15px; border-radius: 4px; line-height: 1.6; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { margin-right: 8px; margin-bottom: 8px; }
.actions { margin-top: 30px; text-align: center; }
.actions .el-button { margin: 0 10px; } */
</style>
